<template>
    <div class="app-container">
        <div class='titleSurvey'>
        <div>
            <p>项目数</p>
            <count-to :start-val="0" :end-val="data.totalOrder" :duration="3600" class="card-panel-num"/>
        </div>
        <div>
            <p>销售中</p>
            <count-to :start-val="0" :end-val="data.totalDevice" :duration="3600" class="card-panel-num"/>
        </div>
        <div>
            <p>售罄</p>
            <count-to :start-val="0" :end-val="data.finishOrder" :duration="3600" class="card-panel-num"/>
        </div>
        <div>
            <p>停售</p>
            <count-to :start-val="0" :end-val="data.finishDevice" :duration="3600" class="card-panel-num"/>
        </div>
        <div>
            <p>权益发放</p>
           <count-to :start-val="0" :end-val="data.interests" :duration="3600" class="card-panel-num"/>
            <!-- <p>积分抵扣:4899分</p> -->
        </div>
        <div>
            <p>预热中</p>
            <count-to :start-val="0" :end-val="data.preheating" :duration="3600" class="card-panel-num"/>
        </div>
    </div>
    </div>
</template>


<script>
import CountTo from 'vue-count-to';
export default {
    name:'index',   //项目概况
    data(){
        return {
            data:{
                totalOrder:1,
                totalDevice:1,
                finishOrder:1,
                finishDevice:1,
                interests:1,
                preheating:1
            }
        }
    },
    components:{
        CountTo
    },

}
</script>


<style lang="less" scoped>
 .app-container{
     .titleSurvey {
        display: flex;
        background: rgba(18, 150, 219, 1);
        div {
            width: 20%;
            text-align: center;
            padding: 2rem;
            p:first-child {
                color: rgba(221, 221, 221, 1);
                font-size: 16px;
                margin: 0;
            }
            .card-panel-num{
                font-size: 2.6rem;
                color: #fff;
                font-weight: 400;
                margin: 21px 0 0 0;
                display: inline-block;
            }
            p:last-child {
                font-size: 16px;
                color: #fff;
                margin: .3rem 0 0 0;
            }
        }
    }
 }  
</style>
